<template>
  <div class="flashcard">
    <div class="flashcard-header">
      <span>{{ number }}</span>
      <div class="header-buttons">
        <button class="ask-kai-btn" title="Ask kai to write this flashcard for you">
          <img alt="ask-kai-icon" src="https://s3.amazonaws.com/knowt.com/images/ai-summarizer-purple-sparkle.svg" style="color: transparent;">
          Ask Kai
        </button>
        
        <button class="move-btn" title="Move">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-move"><path d="M12 2v20"></path><path d="m15 19-3 3-3-3"></path><path d="m19 9 3 3-3 3"></path><path d="M2 12h20"></path><path d="m5 9-3 3 3 3"></path><path d="m9 5 3-3 3 3"></path></svg>
        </button>
        <button class="swap-btn" title="Swap">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-left-right"><path d="M8 3 4 7l4 4"></path><path d="M4 7h16"></path><path d="m16 21 4-4-4-4"></path><path d="M20 17H4"></path></svg>
        </button>
        <button class="delete-btn" title="Delete">
          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-trash2"><path d="M3 6h18"></path><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"></path><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"></path><line x1="10" x2="10" y1="11" y2="17"></line><line x1="14" x2="14" y1="11" y2="17"></line></svg>
        </button>
      </div>
    </div>
    <div class="editor-toolbar">
      <button @mouseleave="leaveIcon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-pilcrow" style="width: 16px; height: 16px;"><path d="M13 4v16"></path><path d="M17 4v16"></path><path d="M19 4H9.5a4.5 4.5 0 0 0 0 9H13"></path></svg>
      </button>
      <button @mouseleave="leaveIcon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-bold" style="width: 16px; height: 16px;"><path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path></svg>
      </button>
      <button @mouseleave="leaveIcon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-italic" style="width: 16px; height: 16px;"><line x1="19" x2="10" y1="4" y2="4"></line><line x1="14" x2="5" y1="20" y2="20"></line><line x1="15" x2="9" y1="4" y2="20"></line></svg>
      </button>
      <button @mouseleave="leaveIcon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-underline" style="width: 16px; height: 16px;"><path d="M6 4v6a6 6 0 0 0 12 0V4"></path><line x1="4" x2="20" y1="20" y2="20"></line></svg>
      </button>
      <button @mouseleave="leaveIcon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-strikethrough" style="width: 16px; height: 16px;"><path d="M16 4H9a3 3 0 0 0-2.83 4"></path><path d="M14 12a4 4 0 0 1 0 8H6"></path><line x1="4" x2="20" y1="12" y2="12"></line></svg>
      </button>
      <button @mouseleave="leaveIcon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-highlighter" style="width: 16px; height: 16px;"><path d="m9 11-6 6v3h9l3-3"></path><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"></path></svg>
      </button>
      <button @mouseleave="leaveIcon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-palette" style="width: 16px; height: 16px;"><circle cx="13.5" cy="6.5" r=".5" fill="currentColor"></circle><circle cx="17.5" cy="10.5" r=".5" fill="currentColor"></circle><circle cx="8.5" cy="7.5" r=".5" fill="currentColor"></circle><circle cx="6.5" cy="12.5" r=".5" fill="currentColor"></circle><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"></path></svg>
      </button>
      <button @mouseleave="leaveIcon">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-code" style="width: 16px; height: 16px;"><polyline points="16 18 22 12 16 6"></polyline><polyline points="8 6 2 12 8 18"></polyline></svg>
      </button>
    </div>
    <div class="flashcard-content">
      <div class="term">
        <div class="buttons">
          <button class="image-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>
            Image</button>
          <button class="record-btn" :disabled="isLocked"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock-keyhole"><circle cx="12" cy="16" r="1"></circle><rect x="3" y="10" width="18" height="12" rx="2"></rect><path d="M7 10V7a5 5 0 0 1 10 0v3"></path></svg>Record</button>

        </div>
        <div class="input-container">
          <input type="text" placeholder="“space” for AI, “/” for format" />
          <label>Term</label>
        </div>
      </div>
      <div class="definition">
        <div class="buttons">
          <button class="image-btn">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-image"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"></rect><circle cx="9" cy="9" r="2"></circle><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"></path></svg>
            Image</button>
          <button class="record-btn" :disabled="isLocked"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-lock-keyhole"><circle cx="12" cy="16" r="1"></circle><rect x="3" y="10" width="18" height="12" rx="2"></rect><path d="M7 10V7a5 5 0 0 1 10 0v3"></path></svg>Record</button>
        </div>
        <div class="input-container">
          <input type="text" placeholder="“space” for AI, “/” for format" />
          <label>Definition</label>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const props = defineProps({
  number: Number
});

const isLocked = ref(true);

const icons = [
  'lucide-pilcrow', 'lucide-bold', 'lucide-italic', 'lucide-underline',
  'lucide-strikethrough', 'lucide-highlighter', 'lucide-palette',
  'lucide-code', 'lucide-code-xml', 'lucide-subscript', 'lucide-superscript',
  'lucide-undo', 'lucide-redo'
];

function hoverIcon(icon: string) {
  // 处理鼠标悬停效果
}

function leaveIcon() {
  // 处理鼠标离开效果
}
</script>

<style scoped>
.flashcard {
  background-color: #2a2a2a;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  color: white;
}

.flashcard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.header-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.header-buttons button {
  background-color: transparent;
  color: white;
  border: none;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.ask-kai-btn {
  background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%);
  color: black;
  border-radius: 20px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
}

.header-buttons button:hover {
  background-color: #555;
}

.editor-toolbar {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
  gap: 8px;
}

.editor-toolbar button {
  background-color: #333;
  color: white;
  border: none;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.editor-toolbar button:hover {
  background-color: #555;
}

.flashcard-content {
  display: flex;
  justify-content: space-between;
}

.term, .definition {
  display: flex;
  align-items: center;
  width: 45%;
}

.buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 8px;
}

.input-container {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.image-btn, .record-btn {
  border: 1px dashed #444;
  border-radius: 0.6rem;
  background-color: #2a2a2a;
  color: white;
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

input[type="text"] {
  padding: 8px;
  border: none;
  border-bottom: 2px solid #555;
  background-color: #1a1a1a;
  color: white;
  margin-bottom: 4px;
}
input[type="text"]{
  background-color: #2a2a2a;
}

label {
  color: #aaa;
  margin-top: 4px;
  text-align: center;
}
</style>